<template>
    <div>
        <!--巨幕-->
        <div class="jumbotron">
            <img src="../../assets/images/news/news/banner.png" alt="">
        </div>
        <!--标签  pc-->
        <div class="news-box">
            <Tabs value="name1">
                <TabPane label="行业资讯" name="name1" :data="newsList">
                    <div class="container tab1" id="tab1">
                        <!--开业优惠-->
                        <router-link to="/news/newsinfo" tag="div" class="opening clearfix">
                            <!--左边图片-->
                            <div class="opening-img">

                            </div>
                            <!--右边文字-->
                            <div class="opening-word">
                                <p class="opening-word-title">{{ openingData.openingTitle }}</p>
                                <p class="opening-word-content">{{ openingData.openingContent | slh(50)
                                    }}</p>
                                <p class="opening-word-time">{{ openingData.openingTime }}</p>
                            </div>
                        </router-link>
                        <!--新闻列表-->
                        <ul class="news-list" ref="newsList">
                            <router-link tag="li" to="/news/newsinfo" class="news-list-item clearfix"
                                         v-for="(item ,index) in dataShow" :key="index">
                                <!--左边日期-->
                                <div class="news-list-item-time">
                                    <p>{{ item.day }}</p>
                                    <p>/ {{ item.month }}</p>
                                </div>
                                <!--右边文字-->
                                <div class="news-list-item-word">
                                    <p>{{ item.title | slh(18) }}</p>
                                    <p>{{ item.content | slh(40)}}</p>
                                </div>
                            </router-link>
                            <!--<Table :columns="columns1" :data="newsList"></Table>-->
                        </ul>

                    </div>
                </TabPane>
                <TabPane label="品牌动态" name="name2">
                    22
                </TabPane>
                <TabPane label="经营技巧" name="name3">
                    33
                </TabPane>
                <TabPane label="加盟问答" name="name4">
                    44
                </TabPane>
            </Tabs>
            <!--<Page :total="page.totalList"-->
            <!--:page-size="page.pageSize"-->
            <!--:current="page.pageCurrent"-->
            <!--show-total-->
            <!--@on-change="changepage"-->
            <!--@on-page-size-change="pageSizeChange"-->
            <!--prev-text="Previous"-->
            <!--next-text="Next"/>-->

           <div id="pageShow">
               <span @click="prePage">
                   shang
               </span>
               <span v-for="(item,index) in totalPage" :key="index">{{ index+1 }}</span>
               <span @click="nextPage">
                   xia
               </span>
           </div>
        </div>

        <commonFooter></commonFooter>

    </div>
</template>

<script>
    import lbt from "@/components/lbt/biglbt"
    import commonFooter from "@/components/footerCom/commonFooter"

    export default {
        data() {
            return {
                // 新闻列表模拟日期数据
                newsList: [
                    {
                        date: "2019.03.26",
                        title: "加盟麻辣香锅加盟总店要注意服务问题加盟麻辣香锅加盟总店要注意服务问题",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看。"
                    },
                    {
                        date: "2019.03.27",
                        title: "加盟麻辣香锅加盟总店要注意服务问题2",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看2。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题5",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题6",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题7",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题8",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                    {
                        date: "2019.03.28",
                        title: "加盟麻辣香锅加盟总店要注意服务问题3",
                        content: "目前来说，我国麻辣香锅加盟总店越来越多，对于广大的创业人士来说，在选择的时候一定要看3。"
                    },
                ],
                // 开业优惠模拟数据
                openingData: {
                    openingTitle: "开业五折优惠",
                    openingContent: "开业五折优惠，买不了吃亏，买不了上当，小吃，返现优惠多多,心动不如来一单，加盟麻辣香锅加盟总店优惠多多",
                    openingTime: "2019.03.27"
                },

                // 所有页面的数据
                totalPage: [],
                // 每页显示数量
                pageSize: 5,
                // 共几页
                pageNum: 1,
                // 当前显示的数据
                dataShow: "",
                // 默认当前显示第一页
                currentPage: 0,

                page: {
                    // 假设数据的总条数
                    totalList: 15,
                    // 每页显示几条
                    pageSize: 9,
                    // 当前页
                    pageCurrent: 1,
                },
                // mintuit的tab栏默认显示的一列
                selected: "1"

            }
        },
        methods: {
            // 对新闻列表数据的时间进行处理
            newsListGetMonth() {
                // console.log(this.newsList)

                // for循环
                // for (var i = 0; i < this.newsList.length; i++) {
                //     var dateArr = this.newsList[i].date.split(".")
                //     this.newsList[i].year = dateArr[0]
                //     this.newsList[i].month = dateArr[1]
                //     this.newsList[i].day = dateArr[2]
                // }

                // foreach循环
                this.newsList.forEach((item, index, arrMine) => {
                    var dateArr = item.date.split(".")
                    item.year = dateArr[0]
                    item.month = dateArr[1]
                    item.day = dateArr[2]
                })
                // console.log(this.newsList)
            },
            // shengluehaoCls(textName, wordLimit) {
            //     // 原生
            //     // var str = document.querySelector(textName).innerHTML;
            //     // var subStr = str.substring(0, wordLimit)
            //     // // console.log(subStr)
            //     // document.querySelector(textName).innerHTML = subStr + (str.length > wordLimit ? "..." : "")
            //     // jq
            //     var str = $(textName).html()
            //     // console.log(str)
            //     var subStr = str.substring(0, wordLimit)
            //     // console.log(subStr)
            //     $(textName).html(subStr + (str.length > wordLimit ? "..." : ""))
            // },

            // 分页页面改变事件
            changepage(index) {
                var _start = (index - 1) * this.pageSize;
                var _end = index * this.pageSize;
                this.historyData = this.ajaxHistoryData.slice(_start, _end);
            },
            pageSizeChange() {

            },

            // 计算页数
            pageNumCalc() {
                // for (let i = 0, length = this.newsList.length; i < length; i++) {
                //     this.data.push({name: "liu", look: "very handsome"});
                // }


                // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
                this.pageNum = Math.ceil(this.newsList.length / this.pageSize) || 1;

                for (let i = 0; i < this.pageNum; i++) {
                    // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                    // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5(对slice操作来说是0-5)条，第二页是6-10(对slice操作来说是5-10)条...
                    this.totalPage[i] = this.newsList.slice(this.pageSize * i, this.pageSize * (i + 1))

                }

                console.log(this.totalPage)

                this.dataShow = this.totalPage[this.currentPage];
                console.log(this.dataShow)
            },

            nextPage() {
                console.log("下")
                if (this.currentPage == this.pageNum - 1) return;
                this.dataShow = this.totalPage[++this.currentPage];
            },
            prePage() {
                console.log("上")
                if (this.currentPage == 0) return;
                this.dataShow = this.totalPage[--this.currentPage];
            }

        },
        created() {
            this.newsListGetMonth(); // 这个方法的调用写在ajax请求之后
            this.pageNumCalc()
        },
        mounted() {
            // this.shengluehaoCls(".opening-small-word-content", 10)
        },
        components: {
            lbt,
            commonFooter
        }
    }
</script>

<style lang="less">
    /*巨幕*/
    .jumbotron {
        width: 100%;
        padding: 0;
        margin: 0;

        img {
            width: 100%;
            display: block;
        }
    }

    @media (max-width: 768px) {
        .jumbotron {
            img {
                /*width: 33%;*/
            }
        }
    }

    /*标签页*/
    /*大盒子*/
    .news-box {
        /**/

        .ivu-tabs {

        }

        .ivu-tabs-nav-scroll {
            width: 952px;
            margin: 0 auto;
        }

        .nav-text.ivu-tabs-nav {
            width: 952px;
            margin: 0 auto;
            /*display: flex;*/
            /*justify-content: center;*/
        }

        /*标签页的每一项*/

        .ivu-tabs-tab {
            /*flex: 1;*/

            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(4) {
                margin-right: 159px;
            }

            width: 120px;
            height: 94px;
            line-height: 94px;
            text-align: center;
            margin: 0;
            padding: 0;
            font-size: 26px;
        }

        /*原来当前的边框底色设置为透明*/

        .ivu-tabs-ink-bar {
            background-color: transparent;
        }

        /*现在当前选中的边框底色*/

        .ivu-tabs-tab-active.ivu-tabs-tab-focused {
            border-bottom: 3px solid #a30808 !important;
        }

        .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
            /*border-color: transparent!important;*/
        }

        /*当前文字的底色*/

        .ivu-tabs-nav .ivu-tabs-tab-active {
            color: #333;
        }

        /*文字底色*/

        .ivu-tabs-nav .ivu-tabs-tab:hover {
            color: #333 !important;
        }

        .ivu-tabs-tab-active.ivu-tabs-tab-focused {
            color: #a30808 !important;
        }

        .ivu-tabs-tabpane {
            &:nth-of-type(1) {
                padding-bottom: 45px;

                .tab1 {
                    padding: 0;
                    margin-top: 50px;
                    width: 1045px;
                    height: 215px;
                    background-color: #ffffff;
                    box-shadow: 0 3px 40px 0 rgba(76, 76, 76, 0.38);


                    /*开业优惠*/

                    .opening {
                        cursor: pointer;
                        /*padding-right: 77px;*/
                        /*左边图片*/

                        .opening-img {
                            float: left;
                            width: 362px;
                            height: 189px;
                            background-color: #ff5d64;
                            margin-top: 14px;
                            margin-left: 9px;
                            margin-right: 54px;
                        }

                        /*右边文字*/

                        .opening-word {
                            float: left;
                            width: 554px;
                            /*height: 189px;*/
                            /*background-color: #ffa34b;*/
                            margin-top: 32px;

                            .opening-word-title {
                                font-size: 28px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 14px;
                                letter-spacing: 3px;
                                color: #333333;
                            }

                            .opening-word-content {
                                font-size: 20px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 36px;
                                letter-spacing: 0px;
                                color: #333333;
                                margin-top: 30px;
                                margin-bottom: 30px;
                            }

                            .opening-word-time {
                                font-size: 18px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 36px;
                                letter-spacing: 0px;
                                color: #999999;
                            }
                        }
                    }

                    /*新闻列表*/

                    .news-list {
                        margin-top: 49px;
                        width: 1045px;
                        /*background-color: pink;*/

                        .news-list-item {
                            width: 100%;
                            height: 149px;
                            margin-bottom: 65px;

                            /*当前鼠标所在的一项 （鼠标经过的样式）*/

                            &:hover {
                                background-color: #fff;
                                box-shadow: 0px 3px 40px 0px rgba(76, 76, 76, 0.38);

                                .news-list-item-time {
                                    cursor: pointer;
                                    background-color: #c50009;

                                    p {
                                        color: #fff;

                                        &:nth-of-type(1) {

                                        }

                                        &:nth-of-type(2) {

                                        }
                                    }
                                }
                            }

                            /* 单独为第一项设置的样式 */

                            .news-list-item-active {
                                background-color: #fff;
                                box-shadow: 0px 3px 40px 0px rgba(76, 76, 76, 0.38);

                                .news-list-item-time {
                                    cursor: pointer;
                                    background-color: #c50009;

                                    p {
                                        color: #fff;

                                        &:nth-of-type(1) {

                                        }

                                        &:nth-of-type(2) {

                                        }
                                    }
                                }
                            }


                            /*左边日期*/

                            .news-list-item-time {
                                cursor: pointer;
                                float: left;
                                width: 118px;
                                height: 115px;
                                border: 1px solid #c50009;
                                margin-top: 14px;
                                margin-right: 36px;

                                p {
                                    color: #c50009;

                                    &:nth-of-type(1) {
                                        font-size: 45px;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        line-height: 27px;
                                        letter-spacing: 0px;
                                        opacity: 0.9;
                                        text-align: center;
                                        margin-top: 26px;
                                    }

                                    &:nth-of-type(2) {
                                        font-size: 20px;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        line-height: 27px;
                                        letter-spacing: 0px;
                                        opacity: 0.9;
                                        text-align: center;
                                        margin-top: 10px;
                                    }
                                }
                            }

                            /*右边文字*/

                            .news-list-item-word {
                                cursor: pointer;
                                padding-top: 10px;
                                width: 888px;
                                height: 100%;
                                /*background-color: #4cae4c;*/
                                float: left;

                                p {
                                    font-weight: normal;
                                    font-stretch: normal;
                                    color: #333333;

                                    &:nth-of-type(1) {
                                        margin-top: 26px;
                                        margin-bottom: 13px !important;
                                        font-size: 24px;
                                        letter-spacing: 3px;

                                    }

                                    &:nth-of-type(2) {
                                        font-size: 18px;
                                        line-height: 36px;
                                        letter-spacing: 0px;

                                    }
                                }
                            }
                        }
                    }
                }
            }

            &:nth-of-type(2) {

            }
        }

        /*标签页1*/

    }

    #pageShow{
        color: #000!important;
        &:link{
            color: #000!important;
        }
    }
</style>
